{% extends 'users/base.html' %}

{% block title %}
    用户个人信息修改
{% endblock %}

{% block link %}
    <script>
        function showImg() {
            var file = document.getElementById('inputFile').files[0];
            var re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function (re) {
                $('#inputImage').attr('src', re.target.result);
            }
        }
    </script>
{% endblock %}

{% block content %}
    <form action="" method="post" enctype="multipart/form-data" class="form-signin">
        {% csrf_token %}
        {% if front_user.css_role != 'school' %}

        <img src="{{ MEDIA_URL }}{{ front_user.css_image }}" alt="头像" id="inputImage">
        <p>
            <label for="inputFile" class="sr-only">Image</label>
            <input type="file" onchange="showImg()" id="inputFile" name="css_image" accept="image/*">
            <a href="javascript:;">更换头像</a>
        </p>

        <div class="form-row align-items-center">
            <label for="inputID" class="sr-only">学号/工号</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-emoji-sunglasses" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
                      <path fill-rule="evenodd" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM6.5 6.497V6.5h-1c0-.568.447-.947.862-1.154C6.807 5.123 7.387 5 8 5s1.193.123 1.638.346c.415.207.862.586.862 1.154h-1v-.003l-.003-.01a.213.213 0 0 0-.036-.053.86.86 0 0 0-.27-.194C8.91 6.1 8.49 6 8 6c-.491 0-.912.1-1.19.24a.86.86 0 0 0-.271.194.213.213 0 0 0-.036.054l-.003.01z"></path>
                      <path d="M2.31 5.243A1 1 0 0 1 3.28 4H6a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2h-.438a2 2 0 0 1-1.94-1.515L2.31 5.243zM9 5a1 1 0 0 1 1-1h2.72a1 1 0 0 1 .97 1.243l-.311 1.242A2 2 0 0 1 11.439 8H11a2 2 0 0 1-2-2V5z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_id" id="inputID" class="form-control" placeholder="学号/工号" value="{{ front_user.css_id }}" required autofocus>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputPhone" class="sr-only">联系电话</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M3.925 1.745a.636.636 0 0 0-.951-.059l-.97.97c-.453.453-.62 1.095-.421 1.658A16.47 16.47 0 0 0 5.49 10.51a16.471 16.471 0 0 0 6.196 3.907c.563.198 1.205.032 1.658-.421l.97-.97a.636.636 0 0 0-.06-.951l-2.162-1.682a.636.636 0 0 0-.544-.115l-2.052.513a1.636 1.636 0 0 1-1.554-.43L5.64 8.058a1.636 1.636 0 0 1-.43-1.554l.513-2.052a.636.636 0 0 0-.115-.544L3.925 1.745zM2.267.98a1.636 1.636 0 0 1 2.448.153l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_phone" id="inputPhone" class="form-control" placeholder="联系电话" value="{{ front_user.css_phone }}" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputName" class="sr-only">真实姓名</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-person" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 0 0 .014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 0 0 .022.004zm9.974.056v-.002.002zM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="css_name" id="inputName" class="form-control" placeholder="真实姓名" value="{{ front_user.css_name }}" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputGender" class="sr-only">性别</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-award" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M9.669.864L8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193l-1.51-.229L8 1.126l-1.355.702-1.51.229-.684 1.365-1.086 1.072L3.614 6l-.25 1.506 1.087 1.072.684 1.365 1.51.229L8 10.874l1.356-.702 1.509-.229.684-1.365 1.086-1.072L12.387 6l.248-1.506-1.086-1.072-.684-1.365z"></path>
                      <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"></path>
                    </svg>
                  </div>
                </div>
              <select name="css_gender" id="inputGender" class="form-control" required>
                <option >性别</option>
                  {% if front_user.css_gender == 'female' %}
                      <option value="female" selected>女</option>
                      <option value="male">男</option>
                  {% else %}
                      <option value="female">女</option>
                      <option value="male" selected>男</option>
                  {% endif %}

              </select>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputRole" class="sr-only">角色</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-people" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.995-.944v-.002.002zM7.022 13h7.956a.274.274 0 0 0 .014-.002l.008-.002c-.002-.264-.167-1.03-.76-1.72C13.688 10.629 12.718 10 11 10c-1.717 0-2.687.63-3.24 1.276-.593.69-.759 1.457-.76 1.72a1.05 1.05 0 0 0 .022.004zm7.973.056v-.002.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10c-1.668.02-2.615.64-3.16 1.276C1.163 11.97 1 12.739 1 13h3c0-1.045.323-2.086.92-3zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
                    </svg>
                  </div>
                </div>
              <select name="css_role" id="inputRole" class="form-control" required>
                <option>角色</option>
                  {% if front_user.css_role == 'student' %}
                      <option value="student" selected>学生</option>
                      <option value="teacher">教师</option>
                  {% else %}
                      <option value="student">学生</option>
                      <option value="teacher" selected>教师</option>
                  {% endif %}

              </select>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputSchool" class="sr-only">学校</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-building" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"></path>
                      <path d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"></path>
                    </svg>
                  </div>
                </div>
              <select name="css_school" id="inputSchool" class="form-control" required>
                <option>学校</option>
                  {% for school in schools %}
                      {% if front_user.css_school == school %}
                          <option value="{{ school.pk }}" selected>{{ school.css_name }}</option>
                      {% else %}
                          <option value="{{ school.pk }}">{{ school.css_name }}</option>
                      {% endif %}
                  {% endfor %}
              </select>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputPassword" class="sr-only">旧密码</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-unlock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 0 0-.224.296 1.626 1.626 0 0 0-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 0 0 .436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 0 0 .224-.296 1.627 1.627 0 0 0 .138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 0 0-.255-.237A1.122 1.122 0 0 0 9.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"></path>
                    </svg>
                  </div>
                </div>
              <input type="password" name="css_password" id="inputPassword" class="form-control" placeholder="旧密码" required>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputPasswordNew" class="sr-only">新密码</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-lock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M11.5 8h-7a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1zm-7-1a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-7zm0-3a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"></path>
                    </svg>
                  </div>
                </div>
              <input type="password" name="password_new" id="inputPasswordNew" class="form-control" placeholder="新密码" required>
            </div>
        </div>

        <button class="btn btn-lg btn-primary btn-block" type="submit">修改</button>

        <p class="mt-5 mb-3 text-muted">&copy; 2020</p>

        {% endif %}

    </form>
{% endblock %}